<template>
  <div>
    <div>
      origin:{{ Test.cureent }} --- {{ Test.name }}
      pinina:{{ cureent }} --- {{ name }}
      <button @click="change">change</button>
    </div>
    <hr>
    <div>
      <p>action-user:{{ Test.user.name }}</p>
      <p> action-name:{{ Test.user.age }}</p>
      <button @click="changeAction">changeAction</button>
    </div>
    <hr>
    <div>
      getters:{{ Test.newName }}
    </div>
    <hr>
    <div>
      <button @click="reast">reast</button>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { useTestStore } from '../store';
import { storeToRefs } from 'pinia';
const Test = useTestStore()
//生命周期 值改变时触发 第二个参数为组价销毁后 依然触发监听
Test.$subscribe((args, state) => {
  console.log(args, state)
}, {
  detached: true,
  deep: true,
  flush: "post"
})
//Action调用是触发 第二个参数为组价销毁后 依然触发监听
Test.$onAction((args) => {
  args.after(() => {
    console.log('after')
  })
  console.log('-------->', args)
}, true)

/**
 *     Test.cureent++ 第一种改变值的方法
 * Test.$patch({   cureent:888,name:'娃娃'}) 多个值同事改变
 *  Test.$patch((state)=>{  state.name = 'sss' state.cureent= 4514 }) 函数式写法可以做判断 推荐
 * Test.$state = {cureent:556, name:'sdad'}  必须全部修改 否则会报错
 *   Test.setCurrent(667) 通过action 来使用
 *  
 */
const { cureent, name } = storeToRefs(Test)

const changeAction = () => {
  Test.setUse()

}
const change = () => {
  console.log(cureent, name);
  // Test.cureent++ 
  // Test.name = 'asdasd'U
  cureent.value++
  name.value = 'asdasd'
}
//重置成初始值
const reast = () => [
  Test.$reset()
]
</script>

<style scoped lang='less'>

</style>